﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Alert Demos</title>
		
		<link rel="stylesheet" type="text/css" href="media/css/demos.css" />
		<link rel="stylesheet" type="text/css" href="media/css/alert.css" />
		
		<script type="text/javascript" src="media/js/js-core.js"></script>
		<script type="text/javascript" src="media/js/alert.js"></script>
		<script type="text/javascript">
			window.onload = function() {
				/*
				 * You'll probably want to replace this with $('#demo').click( fn ); or whatever the
				 * JS library you are using uses. If none then this will do nicly!
				 */
				jsCore.addListener( {
					"mElement":  "demo",
					"sType":     "click",
					"fnCallback": function() {
						 Alert.fnCustom( {
						 	'sTitle': 'Enter you name please',
						 	'sMessage': '<p>With alert you can do all sorts of working things. \
						 		Including asking for user input - please enter your name below:</p> \
						 		<center> \
						 			<input type="text" name="ip1" id="ip1" /> \
						 		</center>',
						 	'sDisplay': 'aaab',
						 	'fnPreComplete': function() {
						 		if ( document.getElementById('ip1').value == '' ) {
						 			document.getElementById('alert_header').innerHTML = 'You need to enter you name please';
						 			return false;
						 		}
						 		return true;
						 	},
						 	'aoButtons': [
						 		{
						 			'sLabel': 'Done',
						 			'sClass': 'selected',
						 			'cPosition': 'b',
						 			'fnSelect': function() {
						 				var sName = document.getElementById('ip1').value;
						 				Alert.fnAlert( "Thank you "+sName+". Hopefully you can see how this could be expanded to do something a lot more clever" );
						 			}
						 		}
						 	]
						} );
					}
				} );
			}
		</script>
	</head>
	<body id="alert_example">
		<div id="container">
			<div class="full_width big">
				<i>Alert</i> custom control asking for user input - fnCustom()
			</div>
		
			<h1>Preamble</h1>
			<p>Alert can provide a replacement function for the built in prompt() function (which only works in IE under the lowest security permissions) - useful for asking users a question which requires feedback. The following example asks for a name and will not finish until something has been entered.</p>
			
			<h1>Live example</h1>
			<p id="demo">fnCustom() example asking for user input - click to run.</p>
			
			<h1>Initialisation code</h1>
			<pre>Alert.fnCustom( {
 	'sTitle': 'Enter you name please',
 	'sMessage': '&lt;p&gt;With alert you can do all sorts of working things. \
 		Including asking for user input - please enter your name below:&lt;/p&gt; \
 		&lt;center&gt; \
 			&lt;input type="text" name="ip1" id="ip1" /&gt; \
 		&lt;/center&gt;',
 	'sDisplay': 'aaab',
 	'fnPreComplete': function() {
 		if ( document.getElementById('ip1').value == '' ) {
 			document.getElementById('alert_header').innerHTML = 'You need to enter you name please';
 			return false;
 		}
 		return true;
 	},
 	'aoButtons': [
 		{
 			'sLabel': 'Done',
 			'sClass': 'selected',
 			'cPosition': 'b',
 			'fnSelect': function() {
 				var sName = document.getElementById('ip1').value;
 				Alert.fnAlert( "Thank you "+sName+". Hopefully you can see how this could be expanded to do something a lot more clever" );
 			}
 		}
 	]
} );</pre>
			
			
			<h1>Other examples</h1>
			<h2>Basic usage</h2>
			<ul>
				<li><a href="example_alert.html">Basic Alert</a></li>
				<li><a href="example_confirm.html">Basic Confirm</a></li>
				<li><a href="example_custom_basic.html">Basic custom alert control</a></li>
				<li><a href="example_custom_position.html">Custom positioning and size of buttons</a></li>
				<li><a href="example_user_input.html">Requiring user input (i.e. prompt())</a></li>
				<li><a href="example_style.html">Alternative CSS styling</a></li>
				<li><a href="example_desktop_save.html">Imitation of a desktop application 'save' dialogue.</a></li>
				<li><a href="example_mouse.html">Mouse over/out functions.</a></li>
			</ul>
			
			<p>Please refer to the <a href="http://www.sprymedia.co.uk/article/Alert+-+Javascript+dialogue+controls"><i>Alert</i> documentation</a> for full information about it's API properties and methods.</p>
			
			
			<div id="footer" style="text-align:center;">
				<span style="font-size:10px;">
					Alert &copy; Allan Jardine 2007-2008.
				</span>
			</div>
		</div>
		
	</body>
</html>
